<template>
  <div class="index-root-view-css">
    <div class="border-animate-area">
      <div class="border-area">
        <shimmer-border :execute="execute"
                        :width="200"
                        :height="200"
        >
        </shimmer-border>
        <div class="content-area">

        </div>
      </div>

    </div>
    <qt-button round text="执行" @click="click" />
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from '@vue/runtime-core'
import AAnimate from "../../components/animate/AAnimate.vue";
import {QTAnimationPropertyName, QTAnimationRepeatMode, QTAnimationValueType} from "@quicktvui/quicktvui3";
import Demo from "../Demo.vue";
import AAnimateGroup from "../../components/animate/AAnimateGroup.vue";
import ShimmerBorder from "../../components/border/ShimmerBorder.vue";

export default defineComponent({
  name: 'home',
  computed: {
    QTAnimationRepeatMode() {
      return QTAnimationRepeatMode
    },
    QTAnimationValueType() {
      return QTAnimationValueType
    },
    QTAnimationPropertyName() {
      return QTAnimationPropertyName
    }
  },
  components: {ShimmerBorder, AAnimateGroup, Demo, AAnimate},
  setup() {
    const execute=ref(false)
    const click=()=>{
      execute.value=true
    }
    function onEnd(){
      execute.value=false
    }
    return {
      click,
      execute,
      onEnd
    }
  }
})
</script>

<style>
.index-root-view-css {
  width: 1920px;
  height: 1080px;
  background-color: #27292e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.border-area{
  position: relative;
}

.border-animate-area{
  display: flex;
  flex-direction: row;
  padding: 3px;
  flex-wrap: wrap;
}

.content-area{
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
